import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';

// 声明类型
const PropsType = {
  cdata: {
    type: Array,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 配置项
    let options = shallowReactive({})
    // 设置点的位置(经纬度)
    const geoCoordMap = {
      新疆:[84.9023,41.748,20],
      西藏:[88.7695,31.6846,20],
      内蒙古:[117.5977,44.3408,20],
      青海:[96.2402,35.4199,20],
      四川:[102.9199,30.1904,20],
      黑龙江:[128.1445,48.5156,20],
      甘肃:[95.7129,40.166,20],
      云南:[101.8652,25.1807,20],
      广西:[108.2813,23.6426,20],
      湖南:[111.5332,27.3779,20],
      陕西:[109.5996,35.6396,20],
      广东:[113.4668,22.8076,20],
      吉林:[126.4746,43.5938,20],
      河北:[115.4004,37.9688,20],
      湖北:[112.2363,31.1572,20],
      贵州:[106.6113,26.9385,20],
      山东:[118.7402,36.4307,20],
      江西:[116.0156,27.29,20],
      河南:[113.4668,33.8818,20],
      辽宁:[122.3438,41.0889,20],
      山西:[112.4121,37.6611,20],
      安徽:[117.2461,32.0361,20],
      福建:[118.3008,25.9277,20],
      浙江:[120.498,29.0918,20],
      江苏:[120.0586,32.915,20],
      重庆:[107.7539,30.1904,20],
      宁夏:[105.9961,37.3096,20],
      海南:[109.9512,19.2041,20],
      台湾:[121.0254,23.5986,20],
      北京:[116.4551,40.2539,20],
      天津:[117.4219,39.4189,20],
      上海:[121.4648,31.2891,20],
      香港:[114.2578,22.3242,20],
      澳门:[113.5547,22.1484,20],
    }
    const seriesData = [
      {
        name: '新疆',
      },
      {
        name: '西藏',
      },
      {
        name: '内蒙古',
      },
      {
        name: '青海',
      },
      {
        name: '四川',
      },
      {
        name: '黑龙江',
      },
      {
        name: '甘肃',
      },
      {
        name: '云南',
      },
      {
        name: '广西',
      },
      {
        name: '湖南',
      },
      {
        name: '陕西',
      },
      {
        name: '广东',
      },
      {
        name: '吉林',
      },
      {
        name: '河北',
      },
      {
        name: '湖北',
      },
      {
        name: '贵州',
      },
      {
        name: '山东',
      },
      {
        name: '江西',
      },{
        name: '河南',
      },{
        name: '辽宁',
      },{
        name: '山西',
      },{
        name: '安徽',
      },{
        name: '福建',
      },{
        name: '浙江',
      },{
        name: '江苏',
      },{
        name: '重庆',
      },{
        name: '宁夏',
      },{
        name: '海南',
      },{
        name: '台湾',
      },{
        name: '北京',
      },{
        name: '天津',
      },{
        name: '上海',
      },{
        name: '香港',
      },{
        name: '澳门',
      }
    ]
    const convertData = function (data) {
      const scatterData = [];
      for (let i = 0; i < data.length; i++) {
        const geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          scatterData.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return scatterData;
    }

    const convertData1 = function(data) {
      const res = [];
      for(let i = 0; i < data.length; i++) {
        const fromCoord = geoCoordMap[data[i].name];
        const toCoord = [109.5996,35.6396];//中心点地理坐标
        if(fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };


    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: point => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          // 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
          visualMap: {
            min: 0,
            max: 10,
            show: false,
            seriesIndex: 0,
            // 颜色
            inRange: {
              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
            },
          },
          // 底部背景
          geo: [{
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.16,
            top: '23%',
            left: '8%',
            map: '中国',
            roam: false,
            itemStyle: {
              normal: {
                borderColor: '#7ad5ff7f',
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: 'rgba(5,21,35,0.1)'
              }
            }
          }],
          series: [
            {
              name: '相关人数',
              type: 'map',
              aspectScale: 0.85, //长宽比
              zoom: 1.16, //缩放
              mapType: '中国', // 自定义扩展图表类型
              top: '23%',
              left: '8%',
              itemStyle: {
                normal: {
                  // 背景渐变色
                  areaColor: {
                    type: 'linear-gradient',
                    x: 0,
                    y: 300,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: 'RGBA(19,96,187,1)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'RGBA(7,193,223,1)' // 50% 处的颜色
                    }],
                    global: true // 缺省为 false
                  },
                  borderColor: '#4ECEE6',
                  borderWidth: 1,
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              // label: {
              //   formatter: params => `${params.name}`,
              //   show: true,
              //   position: 'insideRight',
              //   textStyle: {
              //     fontSize: 14,
              //     color: '#efefef',
              //   },
              //   emphasis: {
              //     textStyle: {
              //       color: '#fff',
              //     },
              //   },
              // },
              data: val,
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: 7,
              effectType: 'ripple',
              legendHoverLink: false,
              showEffectOn: 'render',
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: 'stroke',
              },
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: '#99FBFE',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
              },
              data: convertData(seriesData),
            },
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
              },
              lineStyle: {
                normal: {
                  color: 'white',
                  width: 2,
                  opacity: 0.4,
                  curveness: 0.4
                }
              },
              data: convertData1(seriesData),
            }

          ],
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    return () => {
      const height = "360px"
      const width = "330px"

      return <div>
        <echart options={options} height={height} width={width} />
      </div>
    }
  }
})

